<template>
    <div class="nav">
        <n-space vertical>
            <div class="menu">
                <!--            左边区域-->
                <div class="menu-left">
                    <div class="logo" @click="handleLogin">
                        <span>A</span>
                        <span>b</span>
                        <span>v</span>
                        <span>e</span>
                        <span>r</span>
                    </div>
                    <n-layout>
                        <n-menu
                                @update:value="handleUpdateValue"
                                mode="horizontal"
                                :options="menuOptions"
                        />
                    </n-layout>
                </div>
                <!--            右边区域-->
                <div class="menu-right">
                    <div class="header" v-if="status===1">
                        <div class="name">{{USER.username}}</div>
                        <a href="JavaScript:;" @click="RetreatSafely">退出</a>
                    </div>
                    <div class="header" v-if="status===0">
                        <a href="JavaScript:;" @click="handleLoginAndRegistered">登录/注册</a>
                    </div>
                </div>
            </div>
        </n-space>

    </div>

</template>

<script lang="">
  import { defineComponent,} from 'vue'
  import { NLayout, NSpace, NMenu, useMessage } from 'naive-ui';
  import { useRouter } from 'vue-router'
  import { useStore, mapState} from 'vuex'

  import { key } from '../store'
  import all from '../mock/All.json';
  const menuOptions = [
    {
      label: '前端',
      key: 'qian_duan',
    },
    {
      label: '后端',
      key: 'pinball-1973',

    },
    {
      label: '数据库',
      key: 'a-wild-sheep-chase',
    },
    {
      label: 'node',
      key: 'dance-dance-dance',

    }
  ];
  export default defineComponent({
    components: {
          NLayout,
          NMenu,
          NSpace,
        },
    setup(){
          window.$message = useMessage()
          window.$router = useRouter();
          window.$store = useStore(key);
          return {
            menuOptions,
            handleUpdateValue (key) {
                switch (key) {
                  case 'qian_duan':
                    window.$router.push('/page');
                    sessionStorage.setItem('CLASS_LIST',JSON.stringify(all))
                    window.$store.commit('addCLASS_LIST',all)
                    break
                  default:
                    window.$message.warning('未开发');
                }
            }
          }
        },
    methods: {
      /**
       * 登录注册页面
       */
      handleLoginAndRegistered(){
        window.$router.push('/login');
      },
      handleLogin() {
        window.$router.push('/')
      },
      RetreatSafely() {
        //1、清除Vuex
        window.$store.commit('removeALL');
      //  2、清除localStore
      }
    },
    mounted() {
      if(this.status ===0 && this.TOKEN === '') return;
      if(this.status === 1 && this.TOKEN === '') {
        window.$store.commit('addTOKEN','');
        window.$store.commit('addSTATUS',0);
      }
      if(this.status === 0 && this.TOKEN !== '') {
        if(this.TOKEN === '123')      window.$store.commit('addSTATUS',1);
      }
    },
    computed: {
          ...mapState(['TOKEN', 'status','USER'])
        },
    })
</script>

<style  lang="scss" scoped>
    .nav {
        min-width: 800px;
        max-width: 1200px;
        margin:  auto;
        background-color: #fff;
        .menu{
            width: 100%;
            display: flex;
            border-bottom: 1px solid #ddd !important;
            border-left: 1px solid #ddd !important;
            border-right: 1px solid #ddd !important;
            justify-content: space-between;
            .menu-left {
                display: flex;
                .logo{
                    margin-left: 10px;
                    margin-right: 20px;
                    width: 100px ;
                    height: 100%;
                    font-family: serif;
                    font-size: 32px;
                    line-height: 44.67px;
                    font-weight: 600;
                    cursor: pointer;
                    span:nth-child(1){
                        color: crimson;
                    }
                    span:nth-child(2){
                        color: skyblue;
                    }
                    span:nth-child(3){
                        color: salmon;
                    }
                    span:nth-child(4){
                        color: lightcoral;
                    }
                    span:nth-child(5){
                        color: black;
                    }
                }
            }
            .menu-right {
                min-width: 120px;
                max-width: 150px;
                height: 44.67px;
                float: right;
                display: flex;
                .header {
                    margin: auto;
                    display: flex;
                    .name{
                        max-width: 70px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        margin-right: 10px;
                    }
                }
            }
        }
    }

</style>
